<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #my-canvas {
            width: 1600px;
            height: 900px;
            background: #9bbef8;
        }
    </style>
</head>
<body>
<canvas id="my-canvas">
    您的浏览器不支持 HTML5 canvas。
</canvas>

<script>
    const C = document.getElementById('my-canvas')
    const ctx = C.getContext('2d')

    const {PI} = Math;//获取常量 PI ，绘制圆用
    //clear before path, start create
    // no path ,stroke() and  fill()  is useless
    ctx.beginPath();
    //x y 圆心 半径 开始弧度 结束弧度 逆时针  (默认false 顺时针)
    ctx.arc(100, 100, 50, 0, 2 * PI, true);
    ctx.closePath();//创建从当前点到开始点的路径
    ctx.fillStyle = '#fff';//设置填充样式
    ctx.fill();//填充--默认黑色
</script>
</body>
</html>
